/*----------------------------------------*\
  NOTIFICATION
\*----------------------------------------*/

.notification {
  @apply flex relative;
  @apply p-2 xs:p-4 lg:p-6 2xl:p-8 rounded;
  @apply shadow-lg;
  @apply bg-gray-50;

  .btn,
  a,
  a[target='_blank'] {
    @apply text-current border-current;

    &:hover {
      @apply text-current brightness-50;
    }
  }

  a,
  a[target='_blank'] {
    @apply underline underline-offset-2;
  }
}

.notification--error,
.notification--alert {
  @apply bg-red-50;
  @apply text-red-800;
}

.notification--success {
  @apply bg-green-50;
  @apply text-green-800;
}

.notification--info {
  @apply bg-blue-50;
  @apply text-blue-700;
}

.notification--hint {
  @apply bg-secondary-50;
  @apply text-text-700;
}

.notification--warning {
  @apply bg-orange-50;
  @apply text-orange-800;
}

.notification--alert {
  @apply bg-red-900;
  @apply text-white;
}

.notification__icon {
  @apply mr-3;
  @apply h-10 w-10;
  @apply flex-shrink-0;
  @apply fill-current;
}

.notification__close {
  @apply absolute top-0 right-0;

  svg {
    @apply w-8 h-8;
  }
}

.notification__content {
  @apply min-w-0;
  @apply mt-2.5 xl:mt-2;
  @apply mb-2.5 xl:mb-2;
  p {
    @apply break-words;
    @apply !m-0;
  }
}

.notification__content > *:first-child {
  @apply mb-1;
}

.notification .btn {
  @apply mt-4 sm:mt-8 lg:mt-0;
  @apply lg:ml-6;
}

.cookie-banner .btn__text {
  @apply whitespace-nowrap;
}
